<template>
	<view class="info">
		<navbar title="报名资料" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		<view class="banner-nav">
			<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/info-top.png" mode=""></image>
		</view>
		<view class="main p30">
			<view class="fc333 bold fs36">报名信息</view>
			<view class="bor-bot pb30" v-for="(item,index) in infoData" :key="index">
				<view class="fc333 fs30 mt20">姓名：{{ item.real_name }}</view>
				<view class="fc333 fs30 mt20">手机号：{{ item.phone }}</view>
				<view class="fc333 fs30 mt20">身份证号：{{ item.id_card }}</view>
			</view>
			<view class="fc333 fs30 mt20">年龄分组：{{ baomingData.zuName }}</view>
			<view class="fc333 fs30 mt20">专业分组：{{ baomingData.zhuanyeName }}</view>
		</view>
		
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="baoming fcwhite fs36 acea-row row-middle row-column row-center" @click="pay" v-if="stage_id>1">
			<view>{{ pay_price }}元</view>
			<view>支付参与</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
	</view>
</template>

<script>
	import{
		getBaoMing,
		baomingCreateMore
	} from '@/api/other.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				huodong_id:'',
				stage_id:'',
				infoData:[],
				baomingData:[],
				pay_price:"",
			};
		},
		onLoad(option) {
			this.huodong_id = option.huodong_id;
			this.stage_id = option.stage_id;
			this.getBaoMing();
		},
		methods:{
			pay(){
				let that = this;
				uni.showLoading({
					title:'支付中'
				})
				baomingCreateMore({ huodong_id: that.huodong_id }).then(res=>{
					let { orderId,jsConfig } = res.data.result;
					uni.requestPayment({
						timeStamp: jsConfig.timestamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function(res) {
							uni.hideLoading();
							that.$util.Tips({ title:'支付成功' },()=>{
								uni.navigateTo({
									url: '/pages/home/status'
								})
							})
						},
						fail: function() {
							uni.hideLoading();
							uni.showToast({
								title: that.$t(`取消支付`),
								icon: 'none'
							});
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}).catch(err=>{
					uni.hideLoading();
					that.$util.Tips({ title: err })
				})
			},
			getBaoMing(){
				getBaoMing({ huodong_id: this.huodong_id }).then(res=>{
					this.pay_price = res.data.data.pay_price;
					this.infoData = res.data.data.baomingUserInfo.infoData;
					this.baomingData = res.data.data.baomingUserInfo;
				}).catch(err=>{
					this.$util.Tips({ title: err },()=>{
						uni.navigateBack()
					})
				})
			},
		}
		
	}
</script>

<style lang="scss">
	.info{
		
		.banner-nav{
			width: 100%;
			height: 424rpx;
		}
		
		.main{
			width: 100%;
			border-radius: 20rpx 20rpx 0px 0px;
			margin-top: -50rpx;
			background-color: #ffffff;
			position: relative;
			box-shadow: 0 0 15rpx #f2f2f2;
			padding-bottom: 30rpx;
		}
		
		.baoming{
			position: fixed;
			bottom: 30rpx;
			left: 0;
			right: 0;
			width: 100%;
			height: 140rpx;
			background-color: #6252DF;
			text-align: center;
			margin-top: 150rpx;
		}	
		
	}
</style>
